<template>
  <section class="container">
    <el-row 
      :gutter="20"
      class="i-body">
      <el-col 
        :span="4" 
        class="b-l">
        <ul>
          <li 
            v-for="(item,idx) in leftList" 
            :key="idx">
            <nuxt-link 
              :to="item.to">
              <i :class="item.icon"/>
              &nbsp;
              {{ item.name }}
            </nuxt-link>
          </li>
        </ul>
      </el-col>
      <el-col 
        :span="15" 
        class="b-m">
        <el-tabs 
          v-model="activeName">
          <el-tab-pane 
            label="活跃" 
            name="first">
            <template 
              v-for="(post,idx) in posts">
              <post-item 
                :post="post" 
                :key="idx"/>
            </template>
          </el-tab-pane>
          <el-tab-pane 
            label="精华" 
            name="second">
            精华部分
          </el-tab-pane>
          <el-tab-pane 
            label="投票" 
            name="third">
            投票部分
          </el-tab-pane>
          <el-tab-pane 
            label="最近" 
            name="fourth">
            最近部分
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col 
        :span="5" 
        class="b-r">
        <rmd-ad/>
        <wel-tags/>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import postItem from "~/components/snippts/media.vue"
import rmdAd from "~/components/snippts/recommend.vue"
import welTags from '~/components/snippts/welcomeTags.vue'

export default {
  components: {
    postItem,
    rmdAd,
    welTags
  },
  data() {
    return {
      leftList: [
        { 
          name: '推荐',
          to:'/recommend',
          icon:'el-icon-info'
        },
        { 
          name: '前端',
          to:'/web',
          icon:'el-icon-success'
        },
        { 
          name: 'IOS',
          to:'/IOS',
          icon:'el-icon-warning'
        },
        { 
          name: '后端',
          to:'/back',
          icon:'el-icon-star-on'
        },
        { 
          name: '人工智能',
          to:'/ai',
          icon:'el-icon-upload'
        },
      ],
      activeName: 'first',
      posts:[
        {userId:213,tags:{tag:'life',isActive:true},img:require('~/assets/imgs/postImg/2.jpg'),msg:'生活不止眼前的苟且，还有诗和远方。',votes:12,replys:8,views:233,date:'2天前'},
        {userId:3301,tags:{tag:'blogs',isActive:true},img:require('~/assets/imgs/postImg/1.jpg'),msg:'生活不止眼前的苟且，还有诗和远方。',votes:12,replys:8,views:233,date:'1天前'},
        {userId:23,tags:{tag:'notice',isActive:false},img:require('~/assets/imgs/postImg/2.jpg'),msg:'生活不止眼前的苟且，还有诗和远方。',votes:12,replys:8,views:233,date:'1周前'},
        {userId:78,tags:{tag:'topLine',isActive:true},img:require('~/assets/imgs/postImg/3.jpg'),msg:'生活不止眼前的苟且，还有诗和远方。',votes:12,replys:8,views:233,date:'1小时前'},
      ]
    };
  }
};
</script>

<style>
.el-main{
  padding-top:0;
}
.container {
  display: flex;
  justify-content: center;
}
.i-body {
  width: 1200px;
}
.b-l>ul{
  padding:0
}
.b-l a{
  display: block;
  height:40px;
  line-height: 40px;
  padding-left:12px;

}
.b-l a:hover,
.b-l a.nuxt-link-active{
  color:#409EFF;
  background-color: hsla(0,0%,87%,.2);
}
.el-tabs__header{
  margin: 0;
  margin-top: 10px;
}
.b-r,.b-l{
  padding-top: 15px;
}
.b-r>div{
  margin-bottom: 10px;
}
</style>
